<template>
    <div class="posf fs-option bo-bg" v-bind:class="[getClass]">
        <div v-for="(item, i) in list" class="hover" v-bind:style="{fontSize: item.value}" v-text="item.name" v-bind:class="{active: index === i}" v-on:click="change(i)"></div>
    </div>
</template>

<script>
  import {Observer} from '../../core/util'
  // 字号列表下拉框组件
  export default {
    created: function () {
        var self = this,
            editor;
        Observer.register('hidecloth', function () {
            self.show = false;
        });
        Observer.register('showfontsizelist', function () {
            self.show = true;
            Observer.fire('getcurfontsize', function (i, item) {
                self.index = i;
            });
            Observer.fire('showcloth');
        });
        Observer.register('getcurfontsize', function (callback) {
            var value = Number(editor.queryCommandValue('fontsize').replace(/px/g, ''));
            for (var i = 0, len = self.list.length; i < len; i++) {
                if (Number(self.list[i].value.replace(/px/g, '')) >= value) break;
            }
            callback(i, self.list[i]);
        });
        function editorCompleted(e) {
            Observer.remove('editorCompleted', editorCompleted);
            editor = e;
        }
        Observer.register('editorCompleted', editorCompleted);
    },
    data: function(){
        return {
            show: false,
            index: -1,
            list: [{
                name: $.i18n('toolbar_font_size_6.7'),
                value: "6.7px"
            }, {
                name: $.i18n('toolbar_font_size_7.7'),
                value: "7.7px"
            }, {
                name: $.i18n('toolbar_font_size_8.7'),
                value: "8.7px"
            }, {
                name: $.i18n('toolbar_font_size_10'),
                value: "10px"
            }, {
                name: $.i18n('toolbar_font_size_12'),
                value: "12px"
            }, {
                name: $.i18n('toolbar_font_size_14'),
                value: "14px"
            }, {
                name: $.i18n('toolbar_font_size_16'),
                value: "16px"
            }, {
                name: $.i18n('toolbar_font_size_18.7'),
                value: "18.7px"
            }, {
                name: $.i18n('toolbar_font_size_20'),
                value: "20px"
            }, {
                name: $.i18n('toolbar_font_size_21.7'),
                value: "21.7px"
            }, {
                name: $.i18n('toolbar_font_size_24'),
                value: "24px"
            }, {
                name: $.i18n('toolbar_font_size_29.7'),
                value: "29.7px"
            }, {
                name: $.i18n('toolbar_font_size_32'),
                value: "32px"
            }, {
                name: $.i18n('toolbar_font_size_34.7'),
                value: "34.7px"
            }, {
                name: $.i18n('toolbar_font_size_48'),
                value: "48px"
            }, {
                name: $.i18n('toolbar_font_size_56'),
                value: "56px"
            }, {
                name: $.i18n('toolbar_font_size_60'),
                value: "60px"
            }, {
                name: $.i18n('toolbar_font_size_70'),
                value: "70px"
            }, {
                name: $.i18n('toolbar_font_size_80'),
                value: "80px"
            }]
        }
    },
    computed: {
        getClass: function () {
            return this.show ? '' : 'hide';
        }
    },
    methods: {
        change: function (i) {
            this.show = false;
            Observer.fire('execCommand', ['fontsize', this.list[i].value]);
            Observer.fire('hidecloth');
        }
    }
  }
</script>
